<template>
    <div>
       
        <el-row :class={top:istop} style="height:50px">
            <el-col :span='10' >
               <el-input placeholder="请输入搜索内容"></el-input>
               
            </el-col>
            <el-col :span='4'>
                <el-button>搜索</el-button>
            </el-col>
        </el-row>
        <el-row>
            <!-- 目录 -->
            <el-col :span='4' :class={top:istop}>
                <el-row>
                    <el-col :span='24'>
                        <el-button>添加</el-button>
                        <el-button>修改</el-button>
                        <el-button>删除</el-button>
                    </el-col>
                </el-row>

                <el-row>
                    <el-table>
                        <el-table-column type='selection'></el-table-column>
                        <el-table-column label='组件目录'></el-table-column>
                    </el-table>
                   
                </el-row>
            </el-col>
            <!-- 组件  -->
            <el-col :span='14' :class={top:istop}>
                <el-row>
                    <el-col :span='24'>
                       <el-button type="primary" @click="showDialog('new')">添加</el-button>
                    <el-button type="success" @click="showDialog('save')">修改</el-button>
                     
                        <el-button @click="editCode()">编辑</el-button>
                       
                        <el-button>删除</el-button>
                    </el-col>
                
                </el-row>

                <el-row>
                    <el-table :data="caseArray"
                    ref = "multipleTable"
                    @selection-change="handleSelectionChange"
                    >
                        <el-table-column type='selection'></el-table-column>
                        <el-table-column label='组件名称' prop="caseName"></el-table-column>
                        <el-table-column label='创建人' prop="crName"></el-table-column>
                        <el-table-column label='创建时间' prop="crDate"></el-table-column>
                    </el-table>
                   
                </el-row>
            </el-col>
              <el-dialog title='组件' :visible.sync='dialogTableVisible'>
            <el-form :model='tempCaseInfo'>
                <el-form-item label='名称' :label-width="formLabelWidth">
                    <el-input v-model='tempCaseInfo.caseName' autocomplete="off" ></el-input>
                </el-form-item>
                 <el-form-item label='类型' :label-width="formLabelWidth">
                    <el-input v-model='tempCaseInfo.type' autocomplete="off" ></el-input>
                </el-form-item>
                 <el-form-item label='工程' :label-width="formLabelWidth">
                    <el-input v-model='tempCaseInfo.projectName' autocomplete="off" ></el-input>
                </el-form-item>
                 <el-form-item label='图片' :label-width="formLabelWidth">
                    <el-input v-model='tempCaseInfo.image' autocomplete="off" ></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer" class='diaglog-footer'>
                <el-button @click="dialogTableVisible=false">取消</el-button>
                <el-button type="primary" @click="save()">确定</el-button>
            </div>
        </el-dialog>

            <!-- sql -->
            <el-col :span='6' :class={top:istop}>
                <el-row>
                    <el-col :span='24'>
                        <el-button>添加</el-button>
                        <el-button>修改</el-button>
                        <el-button>编辑</el-button>
                        <el-button>删除</el-button>
                    </el-col>
                </el-row>

                <el-row>
                    <el-table>
                        <el-table-column type='selection'></el-table-column>
                        <el-table-column label='sql名称'></el-table-column>
                        <el-table-column label='创建人'></el-table-column>
                     
                    </el-table>
                   
                </el-row>

            </el-col>
        </el-row>
                            
    </div>
</template>

<script>
import {CaseInfo} from '../store/module/CaseInfo'
import {StringUtil} from '../util/StringUtil'
export default {
    data:function(){
        return{
            istop:true,
             // 弹框中组件临时信息
      tempCaseInfo:  {},
        caseArray:[],//方案数组
          operateFlag: '',
      formLabelWidth:'120px' ,//diaglog宽度
      
        dialogTableVisible:false,//弹框
            multipleSelection: [] //表格选择值
        }
    },
     mounted(){
        this.getCaseArray();
    },
      methods:{
        getCaseArray(){
              let temp = localStorage.getItem("caseArray");
             this.caseArray = temp ? JSON.parse(temp) : [];
        },
        showDialog(flag){
           
           switch(flag){
              
               case 'new':
                   this.tempCaseInfo= new CaseInfo();
                   
                   break;
                case 'save':   
                  this.checkSelect();
                   this.tempCaseInfo = this.multipleSelection[0];
                   break;
                  
                       
           }
            this.dialogTableVisible = true;
            
           this.operateFlag = flag;
         
        },
          //保存方案
        save(){
                   
                    //修改
                    if(this.tempCaseInfo.caseId != undefined  ){
                       for(let i = 0 ;i<this.caseArray.length;i++){
                           if(this.caseArray[i].caseId == this.tempCaseInfo.caseId){
                               this.caseArray[i] = this.tempCaseInfo;
                               break;
                           }
                       }

                    }
                    //新增
                    else{
                         let id = StringUtil.uuid();
                        this.tempCaseInfo.caseId = id;
                         this.caseArray.push(this.tempCaseInfo);

                    }
                    this.tempCaseInfo.code = this.webCode;
  
                    //添加到Localstorage
                   localStorage.setItem('caseArray',JSON.stringify(this.caseArray));
                    this.dialogTableVisible = false;

                    //添加到 状态管理
                    this.$store.commit('update',this.tempCaseInfo);
                    
        },
          //获取select框架的值 
        select(key){
            for(let i = 0;i<this.caseArray.length;i++){
                if(this.caseArray[i].caseId == key){
                    this.tempCaseInfo = this.caseArray[i];
                    this.webCode = this.tempCaseInfo.code;
                    //添加到状态管理
                    this.$store.commit("update",this.tempCaseInfo);
                	break;
                }
                }
        },
        //
         handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      warning(val){
          this.$notify({
              title:'警告',
              message:val,
              type:'warning'
          })
      },
      checkSelect(){
           if(this.multipleSelection.length == 0){
                        this.warning('请选中数据行');
                        return;
                   }
                   if(this.multipleSelection.length > 1){
                       this.warning('请选择单行数据');
                       return;
                   }
                   this.tempCaseInfo = this.multipleSelection[0];
                   this.$store.state.CaseInfo = this.multipleSelection[0];    
      },
      //跳转到代码编辑
      editCode(){
          this.checkSelect();
         let id  = this.$store.state.CaseInfo.caseId;
         let code =  this.$router.resolve({name:'editor',query:{id:id}});
        window.open(code.href,'_black')
      }


      
      }

    
}
</script>

<style >
    .top{
       border: 1px solid black;
       height: 1000px;
    }

</style>